<template>
  <div class="login-bg-container">
    <!-- 智慧医疗主题背景 -->
    <div class="medical-bg">
      <!-- 主背景渐变 -->
      <div class="main-gradient"></div>

      <!-- 医疗相关装饰元素 -->
      <div class="medical-elements">
        <!-- 医疗图标 -->
        <div class="medical-icon medical-1">🏥</div>
        <div class="medical-icon medical-2">⚕️</div>
        <div class="medical-icon medical-3">💊</div>
        <div class="medical-icon medical-4">🩺</div>

        <!-- 预约挂号相关图标 -->
        <div class="medical-icon appointment-1">📅</div>
        <div class="medical-icon appointment-2">⏰</div>
        <div class="medical-icon appointment-3">👨‍⚕️</div>
        <div class="medical-icon appointment-4">👩‍⚕️</div>

        <!-- 智慧医疗元素 -->
        <div class="medical-icon smart-1">💻</div>
        <div class="medical-icon smart-2">📱</div>
        <div class="medical-icon smart-3">🔬</div>
      </div>

      <!-- 数据流线条 -->
      <div class="data-flow-lines">
        <div class="flow-line line-1"></div>
        <div class="flow-line line-2"></div>
        <div class="flow-line line-3"></div>
        <div class="flow-line line-4"></div>
      </div>

      <!-- 医疗装饰图案 -->
      <div class="medical-patterns">
        <div class="pattern pattern-1"></div>
        <div class="pattern pattern-2"></div>
        <div class="pattern pattern-3"></div>
      </div>
    </div>

    <!-- 登录卡片 -->
    <div class="login-card-container">
      <el-card class="login-card">
        <!-- 系统标题 -->
        <div class="system-title">
          <div class="title-icon">🏥</div>
          <h1>智慧医疗预约挂号系统</h1>
          <p>便捷就医，智能预约</p>
        </div>

        <el-form
          ref="ruleFormRef"
          class="login-form"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
        >
          <el-form-item label="用户名" prop="userName">
            <el-input
              v-model="ruleForm.userName"
              placeholder="请输入用户名"
              prefix-icon="User"
              size="large"
            />
          </el-form-item>

          <el-form-item label="密码" prop="userPass">
            <el-input
              v-model="ruleForm.userPass"
              type="password"
              show-password
              placeholder="请输入密码"
              prefix-icon="Lock"
              size="large"
            />
          </el-form-item>

          <el-form-item label="验证码" prop="checkCode">
            <div class="verification-container">
              <el-input
                v-model="ruleForm.checkCode"
                placeholder="请输入验证码"
                size="large"
                style="width: 120px"
              />
              <el-tag type="primary" size="large" class="verification-code">
                {{ ruleForm.showCode }}=?
              </el-tag>
              <el-link
                type="primary"
                @click="createCheckCode"
                class="refresh-link"
              >
                看不清,换一张
              </el-link>
            </div>
          </el-form-item>

          <el-form-item>
            <el-checkbox
              v-model="ruleForm.savePassword"
              label="记住密码"
              size="large"
            />
          </el-form-item>

          <el-form-item class="button-group">
            <el-button
              type="primary"
              @click="submitForm(ruleFormRef)"
              size="large"
              class="login-btn"
            >
              登录
            </el-button>
            <el-button
              @click="resetForm(ruleFormRef)"
              size="large"
              class="reset-btn"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";

import { ElMessage, type FormInstance, type FormRules } from "element-plus";
//import axios from 'axios'
import { useRouter } from "vue-router";
//引入pinia
import { useCounterStore } from "@/stores/counter";
//pinia 变量
const counter = useCounterStore();
const router = useRouter();

import { dataRead } from "@/Utils/Http";

//钩子函数
onMounted(() => {
  createCheckCode();

  //反填 记住密码
  ruleForm.userName = localStorage.getItem("userName") ?? "";
  ruleForm.userPass = localStorage.getItem("userPass") ?? "";
  //勾选记住密码(用户名密码 不为空)
  if (ruleForm.userName) {
    ruleForm.savePassword = true;
  }
});

//登录类型
interface RuleForm {
  userName: string;
  userPass: string;
  checkCode: string; //输入验证码
  showCode: string; //显示验证码(生成)
  savePassword: boolean; //记住密码
}

const ruleFormRef = ref<FormInstance>();
//用户登录
const ruleForm = reactive<RuleForm>({
  userName: "",
  userPass: "",
  checkCode: "", //输入验证码
  showCode: "", //显示验证码(生成)
  savePassword: false, //记住密码
});

const rules = reactive<FormRules<RuleForm>>({
  userName: [
    // { required: true, message: '请输入用户名', trigger: 'blur' },
    // { min: 3, max: 30, message: '字符长度介于[3-30]', trigger: 'blur' },
  ],
  userPass: [
    // { required: true, message: '请输入密码', trigger: 'blur' },
    // { min: 4, max: 30, message: '字符长度介于[4-30]', trigger: 'blur' },
  ],
  checkCode: [
    // { required: true, message: '请输入验证码', trigger: 'blur' },
    //{ min: 4, max: 30, message: '字符长度介于[4-30]', trigger: 'blur' },
  ],
});
//生成验证码
const createCheckCode = () => {
  //数据源
  const strCode1 = "0123456789";
  const strCode2 = "0123456789qwertyuiopasdfghjASDFGHJKQLMNVCXZSTY";
  //运算符
  const strCalc = "+-*/";

  //数字+字母
  //清除已经生成的验证码
  ruleForm.showCode = "";
  //1.生成4位 循环四次
  // for (let i = 0; i < 4; i++)
  //  {
  //   //随机下标
  //   const index = Math.floor(Math.random() * strCode2.length);
  //   //获取下标对应的字符,追加到生成的验证码中
  //   ruleForm.showCode = ruleForm.showCode + strCode2[index];
  //  }
  //2.生成算式验证码
  //第一个数字
  let num1 = Math.floor(Math.random() * 9) + 1;
  //第二个数字
  let num2 = Math.floor(Math.random() * 9) + 1;
  //运算符号
  const calc = strCalc[Math.floor(Math.random() * strCalc.length)];
  //减法小于0
  if (calc == "-" && num1 - num2 < 0) {
    const temp = num1;
    num1 = num2;
    num2 = temp;
  }
  //除法,除不尽
  if (calc == "/" && num1 % num2 > 0) {
    num1 = num1 * num2;
  }
  //生成验证码
  ruleForm.showCode = num1 + calc + num2;
};

//登录
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!", ruleForm);
      //验证码判断,不区分大小写(转换为统一大小写)
      // if (ruleForm.checkCode.toUpperCase() != ruleForm.showCode.toUpperCase())
      // {
      //   ElMessage.error("验证码错误!请重新输入")
      //   createCheckCode()
      //   return
      // }

      //算式判断
      if (ruleForm.checkCode != eval(ruleForm.showCode).toString()) {
        ElMessage.error("验证码错误!请重新输入");
        createCheckCode();
        return;
      }

      dataRead.post("/BaseData/Login", ruleForm).then((res) => {
        if (res.data.code == 100) {
          //        // 登录成功，写JWT的 token到本地
          // window.localStorage.setItem("token", res.data.accessToken);
          //       // 数据提交后端要加入新的Token值
          // axios.defaults.headers.common["Authorization"] =
          //         "Bearer " + res.data.accessToken;

          //勾选记住密码
          if (ruleForm.savePassword) {
            localStorage.setItem("userName", ruleForm.userName);
            localStorage.setItem("userPass", ruleForm.userPass);
          } //未勾选 记住密码,删除localStorage中的用户名密码
          else {
            localStorage.removeItem("userName");
            localStorage.removeItem("userPass");
          }
          //给 pinia赋值
          Object.assign(counter.userInfo, res.data.data);
          ElMessage.success("登录成功!");
          //
          router.push("/main");
        } else {
          ElMessage.error(res.data.message);
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style scoped>
.login-bg-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}

/* 智慧医疗主题背景 */
.medical-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* 主背景渐变 - 医疗主题 */
.main-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    #1e3a8a 0%,
    #3b82f6 20%,
    #06b6d4 40%,
    #10b981 60%,
    #34d399 80%,
    #6ee7b7 100%
  );
  background-attachment: fixed;
}

/* 医疗图标装饰 */
.medical-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.medical-icon {
  position: absolute;
  font-size: 2.5rem;
  opacity: 0.15;
  animation: medicalFloat 8s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

/* 医疗图标位置 */
.medical-1 {
  top: 15%;
  left: 8%;
  animation-delay: 0s;
}
.medical-2 {
  top: 25%;
  right: 12%;
  animation-delay: 1s;
}
.medical-3 {
  bottom: 30%;
  left: 15%;
  animation-delay: 2s;
}
.medical-4 {
  top: 60%;
  right: 8%;
  animation-delay: 3s;
}

/* 预约挂号图标位置 */
.appointment-1 {
  top: 20%;
  left: 85%;
  animation-delay: 0.5s;
}
.appointment-2 {
  top: 45%;
  left: 5%;
  animation-delay: 1.5s;
}
.appointment-3 {
  bottom: 25%;
  right: 20%;
  animation-delay: 2.5s;
}
.appointment-4 {
  top: 70%;
  left: 25%;
  animation-delay: 3.5s;
}

/* 智慧医疗图标位置 */
.smart-1 {
  top: 35%;
  right: 5%;
  animation-delay: 1s;
}
.smart-2 {
  bottom: 40%;
  left: 80%;
  animation-delay: 2s;
}
.smart-3 {
  top: 80%;
  right: 35%;
  animation-delay: 3s;
}

/* 数据流线条 */
.data-flow-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.flow-line {
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  height: 2px;
  animation: dataFlow 6s linear infinite;
}

.line-1 {
  top: 20%;
  left: -100%;
  width: 200px;
  animation-delay: 0s;
}

.line-2 {
  top: 40%;
  right: -100%;
  width: 150px;
  animation-delay: 2s;
}

.line-3 {
  top: 60%;
  left: -100%;
  width: 180px;
  animation-delay: 4s;
}

.line-4 {
  top: 80%;
  right: -100%;
  width: 120px;
  animation-delay: 1s;
}

/* 医疗装饰图案 */
.medical-patterns {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pattern {
  position: absolute;
  width: 40px;
  height: 40px;
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.1) 75%
    ),
    linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.1) 75%
    );
  background-size: 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: patternPulse 4s ease-in-out infinite;
}

.pattern-1 {
  top: 30%;
  left: 10%;
  animation-delay: 0s;
}
.pattern-2 {
  top: 60%;
  right: 15%;
  animation-delay: 1.5s;
}
.pattern-3 {
  bottom: 20%;
  left: 70%;
  animation-delay: 3s;
}

/* 动画定义 */
@keyframes medicalFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.15;
  }
  50% {
    transform: translateY(-15px) rotate(5deg);
    opacity: 0.25;
  }
}

@keyframes dataFlow {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100vw);
    opacity: 0;
  }
}

@keyframes patternPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.6;
  }
}

/* 登录卡片容器 */
.login-card-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 480px;
  padding: 20px;
}

/* 登录卡片样式 - 智慧医疗主题 */
.login-card {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 0 25px 50px rgba(30, 58, 138, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(59, 130, 246, 0.2);
  padding: 50px 40px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    #1e3a8a 0%,
    #3b82f6 25%,
    #06b6d4 50%,
    #10b981 75%,
    #34d399 100%
  );
}

.login-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 35px 70px rgba(30, 58, 138, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 系统标题 - 智慧医疗主题 */
.system-title {
  text-align: center;
  margin-bottom: 45px;
  position: relative;
}

.title-icon {
  font-size: 3rem;
  margin-bottom: 15px;
  display: block;
  animation: iconPulse 2s ease-in-out infinite;
}

.system-title h1 {
  font-size: 36px;
  font-weight: 800;
  background: linear-gradient(
    135deg,
    #1e3a8a 0%,
    #3b82f6 30%,
    #06b6d4 60%,
    #10b981 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 15px 0;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(30, 58, 138, 0.1);
}

.system-title p {
  color: #3b82f6;
  font-size: 16px;
  margin: 0;
  font-weight: 500;
  letter-spacing: 1px;
  opacity: 0.8;
}

/* 标题图标动画 */
@keyframes iconPulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
  }
}

/* 表单样式 - 智慧医疗主题 */
.login-form {
  width: 100%;
}

.login-form .el-form-item {
  margin-bottom: 28px;
}

.login-form .el-form-item__label {
  font-weight: 700;
  color: #1e3a8a;
  font-size: 16px;
  margin-bottom: 8px;
  display: block;
}

/* 输入框样式 - 智慧医疗主题 */
.login-form .el-input__wrapper {
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(59, 130, 246, 0.2);
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 52px;
}

.login-form .el-input__wrapper:hover {
  border-color: #3b82f6;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}

.login-form .el-input__wrapper.is-focus {
  border-color: #06b6d4;
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.login-form .el-input__inner {
  color: #1e3a8a;
  font-weight: 500;
  font-size: 15px;
}

.login-form .el-input__inner::placeholder {
  color: #06b6d4;
  font-weight: 400;
}

/* 输入框图标样式 */
.login-form .el-input__prefix {
  color: #3b82f6;
}

.login-form .el-input__suffix {
  color: #3b82f6;
}

/* 验证码容器 - 智慧医疗主题 */
.verification-container {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.verification-code {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
  border: none;
  color: white;
  font-weight: 700;
  border-radius: 12px;
  padding: 10px 16px;
  min-width: 90px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);
  transition: all 0.3s ease;
}

.verification-code:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4);
}

.refresh-link {
  font-size: 13px;
  text-decoration: none;
  color: #3b82f6;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 4px 8px;
  border-radius: 6px;
}

.refresh-link:hover {
  color: #1e3a8a;
  background: rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

/* 按钮组 - 智慧医疗主题 */
.button-group {
  margin-top: 35px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.button-group .el-button {
  width: 140px;
  height: 50px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.login-btn {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
  border: none;
  color: white;
  box-shadow: 0 6px 20px rgba(30, 58, 138, 0.3);
}

.login-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.login-btn:hover::before {
  left: 100%;
}

.login-btn:hover {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #0891b2 100%);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(30, 58, 138, 0.4);
}

.reset-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(59, 130, 246, 0.3);
  color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.reset-btn:hover {
  background: rgba(59, 130, 246, 0.05);
  border-color: #3b82f6;
  color: #1e3a8a;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

/* 复选框样式 - 智慧医疗主题 */
.el-checkbox {
  color: #3b82f6;
  font-weight: 600;
  font-size: 15px;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #3b82f6;
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.el-checkbox__inner {
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  transition: all 0.3s ease;
}

.el-checkbox__inner:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

/* 响应式设计 - 智慧医疗主题 */
@media (max-width: 768px) {
  .login-card-container {
    padding: 15px;
  }

  .login-card {
    padding: 35px 25px;
    border-radius: 20px;
  }

  .system-title h1 {
    font-size: 30px;
    letter-spacing: 1px;
  }

  .title-icon {
    font-size: 2.5rem;
  }

  .verification-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .button-group {
    gap: 15px;
  }

  .button-group .el-button {
    width: 120px;
    height: 45px;
    font-size: 15px;
  }

  .medical-icon {
    font-size: 2rem;
  }

  .pattern {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 25px 20px;
  }

  .system-title h1 {
    font-size: 26px;
  }

  .button-group {
    gap: 10px;
  }

  .button-group .el-button {
    width: 100px;
    height: 42px;
    font-size: 14px;
  }

  .login-form .el-input__wrapper {
    height: 48px;
  }
}

/* 加载动画 - 智慧医疗主题 */
.login-card {
  animation: slideInUp 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 额外的智慧医疗主题效果 */
.login-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.03) 0%,
    transparent 70%
  );
  animation: ripple 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ripple {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}
</style>
